<?php
  session_start();
  require 'connection.php';
  require 'util.php';
  $loggedIn = checkUserLoggedIn();
  $query = "SELECT result.pk, result.title, result.image_url, result.description, result.price, location.latitude, location.longitude FROM result INNER JOIN address on result.address_fk = address.pk INNER JOIN location ON address.location_fk = location.pk";
  $resultArray = getResultArray($query, $pdo);
  generateListedResultsArray($resultArray);
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
<head>
  <meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>
		Test
	</title>
    <link rel="stylesheet" type="text/css" href="css/fontFaces.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/datepicker.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <link rel="stylesheet" type="text/css" href="css/register.css">
    <link rel="stylesheet" type="text/css" href="css/profile.css">
  <script src="js/jquery-1.7.1.min.js"></script>
  <script src="js/jquery-ui-1.8.18.custom.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
  <script src="js/markerclusterer.js"></script>
  <script src="js/infobox.js" type="text/javascript"></script>
  <script src="js/util.js" type="text/javascript"></script>
  <script type="text/javascript" src="scriptGenerator.php"></script>
  <script type="text/javascript" src="js/login.js"></script>
  <script type="text/javascript" src="js/register.js"></script>
  <script type="text/javascript" src="js/profile.js"></script>
  <script src="js/jspostcode.js"></script>
  <script src="js/jquery.form.js"></script>
  <script type="text/javascript">
    <?php
      if(isset($_SESSION['accountActivated'])){
        if($_SESSION['accountActivated']){
          echo "alert('Your account has been activated. Now you can edit your profile by clicking in the profile button');";
        }
        else
        {
          echo "alert('There was an error while activating your account. Please click on the confirmation link again.');";
        }
        unset($_SESSION['accountActivated']);
      }
    ?>
  </script>
</head>
<body> 
<div id="main">
  <div id="header">
    <div id="nav-bar">
      <div id="logo-container">
        <div class="circle"></div>
      </div>
      <div id="left-buttons-container">
        <a href="#" id="filter-rooms" class="blueButton2">ROOMS</a>
      </div>
      <div id="right-buttons-container">
      </div>
      <div id="logout-container">
        <?php
          $logInLogOutText = "";
          if($loggedIn){
            $logInLogOutText = "LOG OUT";
            echo "<a id=\"profileButton\" href=\"#\" class=\"grayButton2\">Profile</a>";
          }else{
            $logInLogOutText = "LOG IN";
          }
          echo "<a id=\"loginButton\" href=\"#\" class=\"grayButton2\">{$logInLogOutText}</a>";
        ?>
      </div>
    </div>
    <div id="menu-controller">

      <div id="controller1">
        <div>
          <span id="search-text">SEARCH</span>
          <div id="search-button-container"></div>
        </div>
        <span>VIEW:</span>
      </div>
      <div id="controller2">
        <span>GRID</span>
        <div id="grid-button-container"></div>
        <div id="listmap-button-container"></div>
        <span>LIST/MAP</span>
        <span>SORT BY:</span>
      </div>
      <div id="controller4">
        <span>MOST RELEVANT</span>
        <div id="most-relevant-button-container"></div>
        
      </div>
      <div id="controller5">
        <span>PER PAGE:</span>
        <span>24</span>
      </div>
    </div>
     <div id="menuWrapper">
      <div class="menu" id="menu">
          <form action="#">
             <div id="location">
              <div class="upper-div-menu">
                <p>LOCATION </p>
              </div>
              <input type="text" maxlenght="50" name="city" id="place-input" placeholder=" ">
             </div>
             <div id="dates" class="textLeft">
                <div class="upper-div-menu">
                  <p>DATES </p>
                </div>
                <div id="date">
                  <table>
                    <tr>
                      <td>
                        <p>FROM</p>
                      </td>
                      <td>
                        <p>TO</p>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <input type="text" id="arrival-input" name="arrival" placeholder=" " >
                      </td>
                      <td>
                        <input type="text" id="departure-input" name="departure" placeholder=" ">
                      </td>
                    </tr>                                   
                  </table>
                </div>
                <div id="roomAndGuest">
                  <table>
                    <tr>
                    <td><p>ROOMS</p></td>
                    <td><p>GUESTS</p></td>
                  </tr>
                    <td><input type="text" id="rooms-input" name="rooms"></td>
                    <td><input type="text" id="guests-input" name="guests"></td>
                  </tr>
                  </table>
                </div>
             </div>
             <div id="roomType" class="textLeft">
                 <div class="upper-div-menu">
                  <p>ROOM TYPE</p>
                 </div>
                 <table>
                  <tr>
                 <td colspan="2"><input type="checkbox" id="room-only" name="room-only" value="room-only">
                 <label for="room-only"><span>ROOM ONLY</span></label></td>
                 </tr>
                 <tr>
                 <td><input type="checkbox" id="hostal" name="hostal" value="hostal">
                 <label for="hostal"><span>HOSTAL</span></label></td>
                 <td><input type="checkbox" id="hotel" name="hotel" value="hotel">
                 <label for="hotel"><span>HOTEL</span></label></td>
                 </tr>
                 </table>
             </div> 
             <div id="hostType" class="textLeft">
                 <div class="upper-div-menu">
                  <p>HOST TYPE</p>
                 </div>
                 <table>
                  <tr>
                 <td><input type="checkbox" id="male" name="male" value="male">
                 <label for="male"><span>MALE</span></label></td>
                 <td><input type="checkbox" id="female" name="female" value="female">
                 <label for="female"><span>FEMALE</span></label></td>
                 </tr>
                 <tr>
                 
                 <td><input type="checkbox" id="couple" name="couple" value="couple">
                 <label for="couple"><span>COUPLE</span></label></td>
                 </tr>
                 </table>
             </div>
             <div id="price">
              <div class="upper-div-menu">
                <p>PRICE</p>
                <input id="priceValue" type="text" value="200" />
              </div>
              <div>
              <input type="range" id="input-range-price" min="0" max="100"></input>
              </div>
             </div>
             <div id="search">
                <div class="upper-div-menu">
                </div>
                <a href="#" class="search-button">SEARCH</a>
             </div>
          
         </form>
      </div>
    </div>
  </div>
  <div id="content-wrapper">
    <div id="resultsContainer">
      <?php
        
        foreach ($resultArray as $r) {
          $hiddenPk = getHiddenListingPk($r['pk']);
          $title = $r['title'];
          $imageUrl = $r['image_url'];
          $description = $r['description'];
          $price = (float)$r['price'];
          echo "<div class=\"result\" id=\"$hiddenPk\">
                  <img src=\"{$imageUrl}\"> 
                  </img>
                  <div class=\"result-info\">
                    <div class=\"result-info-head\">
                      <span>from</span>
                      <span>&#163;{$price}</span>
                    </div>
                    <div class=\"result-info-contents\">
                      <h3>{$title}</h3>
                      <h4>Cihangir, City Centre,</h4>
                      <p>{$description}</p>
                      <a id=\"mapLink{$hiddenPk}\" href=\"#\">MAP</a>
                    </div>
                    <div class=\"result-info-more\">
                      <a id=\"moreInfoButton{$hiddenPk}\" href=\"#\">MORE INFO</a>
                    </div>
                  </div>
                </div>";
        }
      ?>
      
    </div>
    <div id="mapContainer">
    	<div id="map-canvas"></div>
      <div id="moreInfoPanel">
        <div>
          <p>Here's the more info</p>
        </div>
    </div>
    </div>
    
  </div>
</div>
<p id="forceFont">\e08a</p>
<p id="forceFont2">a</p>
<p id="forceFont3">a</p>
<p id="forceFont4">a</p>
<p id="forceFont5">a</p>
<form method="post" id="logoutForm" action="http://quizzie.heliohost.org/test/accountValidator.php">
  <input type="hidden" name="action" value="logout" />
</form>

<div id="loginLayer">
  <div id="loginLayerWrapper">
  </div>
</div>
<div id="loadingLayer">
  <div id="loadingWrapper">
      <div id="loading" class="loginLayerContentsBox">

      </div>
  </div>
</div>
</body>


</html>
